<template>
  <div class="place">
    <!-- 账户信息 -->
    <div class="account-info box ta-center lh-2 fz-12">
      <div class="click" @click="copyString(fromAddress)">
        钱包地址：{{ fromAddressHide }}
      </div>
      <div>PC：{{ balance }}</div>
    </div>

    <!-- 玩法列表 -->
    <ul class="play-list flex flex-rb box pl-30 pr-30">
      <li
        class="play-list__item ta-center click"
        v-for="(v, i) in plays"
        :key="i"
        :class="i === playIndex ? 'selected' : ''"
        @click="changePlayIndex(i)"
      >
        <img :src="v.icon" />
        <div class="fz-18 cl-linear">{{ v.label }}</div>
      </li>
    </ul>

    <!-- 玩法 -->
    <div class="form box">
      <!-- 单双玩法 -->
      <single-double v-show="playIndex === 0"></single-double>
    </div>

    <!-- 规则 -->
    <div class="rule box mb-15">
      <div class="fz-18 mb-5">单双规则：</div>
      <div>
        <div class="mb-5">
          (1)、下单时的第三个区块哈希值最后的数字(只看数字，
          不看字母)同为单数或同为双数时，则成功中奖。
        </div>
        <div>
          (2)、中奖后系统六秒内系统自动返还转PC2倍的同类数字币。
          为保障用户安全，每次的游戏都需记录并实时播报，信息完全透明。
          由于全球使用数字币交易的人数众多，所以平台在六秒内转账后，
          系统可能会出现些许延迟到账情况，是一种正常现象，用户完全不用担心。
        </div>
      </div>
    </div>

    <!-- 下单明细 -->
    <single-double-record></single-double-record>
  </div>
</template>

<script>
import { showToast, copyString, toNumber } from '@/assets/js/utils'
import singleDouble from './single_double.vue'
import singleDoubleRecord from './single_double_record.vue'
import apis from '@/assets/js/apis'

export default {
  data() {
    return {
      fromAddress: '',
      fromAddressHide: '',
      balance: 0,
      isRender: false,

      // 玩法列表
      plays: [
        {
          label: '单双',
          icon: require('@/assets/img/tab_1.png'),
        },
        {
          label: '幸运',
          icon: require('@/assets/img/tab_2.png'),
        },
        {
          label: '大赢家',
          icon: require('@/assets/img/tab_3.png'),
        },
      ],
      playIndex: 0,
    }
  },

  mounted() {
    this.initApp()
  },

  methods: {
    // 初始化App
    async initApp() {
      try {
        // 获取账户地址
        this.fromAddress = window.fromAddress
        this.fromAddressHide = this.fromAddress.replace(
          this.fromAddress.substring(10, 32),
          '*******'
        )

        // 获取账户余额
        const { balance } = await apis.getAmount({
          fromAddress: this.fromAddress,
        })
        this.balance = toNumber(balance.amount)
        this.isRender = true
      } catch (err) {
        console.log(err)
      }
    },

    changePlayIndex(i) {
      if (i > 0) {
        showToast('暂未开放')
      }
    },
  },

  components: {
    singleDouble,
    singleDoubleRecord,
  },
}
</script>

<style lang="scss" scoped>
.account-info {
  background: url('@/assets/img/account_bg.jpg') no-repeat center / cover;
}

.play-list {
  &__item {
    &:not(.selected) {
      filter: brightness(0.6);
    }

    img {
      width: 90px;
    }
  }
}

.form {
  background: url('@/assets/img/place_bg.jpg') no-repeat center / cover;
}

.rule {
  background: linear-gradient(to right, #083137, #0b3b47, #083137);
}
</style>
